<!-- userInfo -->
<template>
  <div class="container userInfo">
    <div class="top">
      <div class="return_box" @click="returnBack">
        <span>返回</span>
      </div>
      <span class="save" @click="update" v-if="hasUser">保存</span>
      <span class="save" @click="submit" v-if="!hasUser">保存</span>
      <div class="avatar_box">
        <img :src="userInfo.headimgurl" alt="">
        <span>{{userInfo.nickname}}</span>
      </div>
    </div>

    <div class="minddle">
      <ul class="userInfo_list">
        <li class="userInfo_item">
          <van-field v-model="formData.studentName" label="孩子昵称" placeholder="请输入孩子昵称" />
        </li>
        <li class="userInfo_item" @click="showBottomArea = true">
          <van-field v-model="formData.sexLabel" disabled label="性别" placeholder="请选择性别"/>
        </li>
        <li class="userInfo_item phone_item">
          <!-- <van-field v-model="formData.linkPhone" label="手机号" type="tel" maxLength="11" placeholder="请输入手机号" /> -->
          <span>手机号</span>
          <input v-model="formData.linkPhone" :disabled="hasUser" type="tel" maxLength="11" placeholder="请输入手机号">
          <span @click="toVerfi" v-if="!hasUser">验证</span>
          <span @click="toVerfi" v-else>修改</span>
        </li>
        <li class="userInfo_item">
          <van-field v-model="formData.linkPerson" label="联系人" placeholder="请输入联系人"/>
        </li>
      </ul>
    </div>

    <div class="popup">
      <van-popup v-model="showBottomArea" round position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          title="选择性别"
          value-key="sexLabel"
          :columns="sexList"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>

    <div class="verfi_popup">
      <van-popup v-model="showVerfiPop" round  :style="{ width: '90%' }">
        <div class="verfi_box">
          <input  class="phone" type="tel" maxlength="11" v-model="verfiLinkPhone" @blur="inputBlur" placeholder="请输入手机号">
          <div class="verfi_code_box">
            <input  type="tel" v-model="verfiCode" @blur="inputBlur" placeholder="验证码">
            <span  v-if="verfiStatus == true" @click="getVerfi">获取验证码</span>
            <span v-else>{{verfiTime}}</span>
          </div>
          <!-- <div  class=" btnHover" @click="verfiCode">取消</div> -->
          <div  class="btn_submit btnHover" @click="verfi">确定</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");
export default {
  data() {
    return {
      hasUser: false,
      userInfo: {},
      
      verfiLinkPhone: '',
      verfiCode: '',
      isVerfi: false,
      formData: {
        studentName: '',
        linkPhone: '',
        linkPerson: '',
        sex: '',
        sexLabel: '',
      },
      showBottomArea: false,
      sexList: [
        {
          sex: '1',
          sexLabel: '男',
        },
        {
          sex: '2',
          sexLabel: '女',
        },
      ],

      verfiTime: 60,
      showVerfiPop: false,
      verfiStatus: true,

    }
  },

  created() {
    this.initData();
    this.initUserData();
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    toVerfi() {
      this.showVerfiPop = true;
      this.verfiLinkPhone = this.formData.linkPhone;
    },

    getVerfi() {
      this.verfiStatus = false;
      let timer = setInterval(() => {
        this.verfiTime -= 1;
        if(this.verfiTime == 0) {
          clearInterval(timer)
          this.verfiStatus = true;
          this.verfiTime = 60
        }
      }, 1000)
      
      this.formGet({
        API: 'sendVerificationCode',
        data: {
          mobile: this.verfiLinkPhone,
        }
      }).then(res => {
        console.log(res)
        
      }).catch(err => {
        this.$notify({ type: 'danger', message: err, duration: 1200 });
				// this.$message.error(err);
      })
      
    },
    
    verfi() {
      if(!(/^1[3456789]\d{9}$/.test(this.verfiLinkPhone))){ 
        this.$toast("手机号码有误，请重新输入");  
        return false; 
      } 
      if(!this.verfiCode) {
        this.$toast('请输入验证码');
        return;
      }

      this.formGet({
        API: 'checkVerificationCode',
        data: {
          mobile: this.verfiLinkPhone,
          verificationCode: this.verfiCode,
        }
      }).then(res => {
        console.log(res)
        if(this.hasUser) {
          // 老用户，修改手机号
          console.log('老用户，修改手机号')
          this.formData.linkPhone = this.verfiLinkPhone;
          this.showVerfiPop = false;
          // this.update();
        }else{
          // 新用户，绑定手机号
          console.log('新用户，绑定手机号')
          this.formData.linkPhone = this.verfiLinkPhone;
          this.showVerfiPop = false;
          this.isVerfi = true;
          // this.submit();
        }
      }).catch(err => {
        this.$notify({ type: 'danger', message: err, duration: 1200 });
      })
    },


    initUserData() {
      this.formGet({
        API: 'getUserInfo',
        data: {
          openId: this.$route.params.openId
        }
      }).then(res => {
        this.userInfo = res;
      })
    },

    initData() {
      let data = {
        openId: this.$route.params.openId,
      }

      this.formGet({
        API: 'queryStudentByOpenId',
        data: data
      }).then(res => {
        if(res) {
          res.sex == 1 ? res.sexLabel = '男' : res.sexLabel = '女';
          this.hasUser = true;
          this.formData = res;
        }else{
          this.hasUser = false;
        }
      }).catch(err => {
        this.$toast(err);
      })
    },

    submit() {
      
      if(!this.formData.linkPhone) {
        this.$toast('请输入手机号，以便您购课后可收到短信提示');
        return;
      }

      if(!this.isVerfi) {
        this.$toast('请验证您的手机号');
        return;
      }

      let data = Object.assign(this.formData, data);
      data.openId = this.$route.params.openId;
      
      if(data.sexLabel == '男') {
        data.sex = '1'
      }else if (data.sexLabel == '女') {
        data.sex = '2';
      }

      data.schoolId = '7323e01b35e84ccfbd7f98979f5cf0c0'    // 默认写死 线上学校
      data.mobile = data.linkPhone;
      data.bmStudentParentList = [
        {
          linkPhone: data.linkPhone,
          linkPerson: data.linkPerson,
          wechat: '',
        }
      ]
      data.bmStudentCustomerList = [];
      data.bmStudentEmployeesList = [];
      data.bmStudentLabelList = [];
      data.bmStudentProductList = [];



      this.post({
        API: 'insertStudent',
        data: data
      }).then(res => {
        this.$toast.success('保存成功');
        this.$router.go(-1);
      }).catch(err => {
        this.$toast(err);
      })
    },
    update() {
      if(!this.formData.linkPhone) {
        this.$toast('请输入手机号，以便您购课后可收到短信提示');
        return;
      }
      let data = Object.assign(this.formData, data);
      data.openId = this.$route.params.openId;
      data.sexLabel == '男' ? data.sex = '1' : data.sex = '2';
      data.schoolId = '7323e01b35e84ccfbd7f98979f5cf0c0'    // 默认写死 线上学校
      data.mobile = data.linkPhone;
      data.bmStudentParentList = [
        {
          linkPhone: data.linkPhone,
          linkPerson: data.linkPerson,
          wechat: '',
          studentParentId: data.studentParentId,
        }
      ]
      data.bmStudentCustomerList = [];
      data.bmStudentEmployeesList = [];
      data.bmStudentLabelList = [];
      data.bmStudentProductList = [];

      this.post({
        API: 'update',
        data: data
      }).then(res => {
        this.$toast.success('保存成功');
        this.$router.go(-1);
      }).catch(err => {
        this.$toast(err);
      })
    },

    onConfirm(value, index) {
      console.log(`当前值：${value.id || value}, 当前索引：${index}`)
      this.formData.sexLabel = this.sexList[index].sexLabel;
      this.showBottomArea = false;
    },
    onCancel() {
      this.showBottomArea = false;
    },
    returnBack() {
      this.$router.go(-1);
    },

    inputBlur() {
      window.scrollTo(0, document.documentElement.clientHeight); 
    },
  }

}

</script>


<style>
.userInfo input {
  text-align: right;
}
</style>
<style scoped>
.verfi_popup input {
  text-align: center !important;
}
.verfi_box {
  background: #fff;
  border-radius: 0 .48rem .48rem .48rem;
  min-height: 7.526667rem;
  text-align: center;
}
.btn_submit {
  width: 3.453333rem;
  height: 1.26rem;
  background: #ffd33d;
  border-radius: .8rem;
  color: #fff;
  font-size: .506667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .88rem auto 0;
}
.verfi_box input {
  font-size: .48rem;
  padding: .353333rem .533333rem;
  box-sizing: border-box;
  background: #eee;
  border: none;
}
.phone {
  width: 80%;
  margin-top: 1.12rem;
  border-radius: .8rem;
}

.verfi_box .verfi_code_box {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  margin-top: .6rem;
}
.verfi_code_box input {
  width: 60%;
  border-radius: .8rem 0 0 .8rem;
}
.verfi_code_box span {
  display: inline-block;
  width: 40%;
  background: #ffd33d;
  color: #fff;
  border-radius: 0 .8rem .8rem 0;
  font-size: .48rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


.userInfo .top {
  width: 100%;
  height: 4.16rem;
  background: url('../assets/img/bg1.png') 0 0 no-repeat;
  background-size: 100%;
}


.phone_item {
  background: #fff;
  padding: 10px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone_item input {
  font-size: 14px;
  margin-left: auto;
  margin-right: 10px;
}
.userInfo_item span {
  font-size: 14px;
}

.userInfo .top .avatar_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.6rem;
}
.userInfo .top .avatar_box img {
  width: 1.893333rem;
  height: 1.893333rem;
  border-radius: 50%;
}
.userInfo .top .avatar_box span{
  font-size: .4rem;
  color: #333333;
}

.userInfo .minddle {
  margin-bottom: .173333rem;
}
.userInfo .minddle .userInfo_item {
  margin-top: .133333rem;
}
.save {
  position: absolute;
  right: .52rem;
  top: .293333rem;
  font-size: .373333rem;
  color: #333;
}
</style>
